<template>
  <!-- 新增按钮 -->
  <el-button
    class="addCategoryButton"
    type="primary"
    @click="addCategoryVisible = true"
    >新增分类</el-button
  >
  <!-- 数据表格 -->
  <el-table :data="tableData.list" stripe :border="true" style="width: 100%">
    <el-table-column label="#" width="36" type="index" />
    <el-table-column prop="cover" label="封面" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-image
            style="width: 80px; height: 80px"
            fit="fill"
            :src="proxy.imageUrl + scope.row.cover"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="categoryName" label="名称" width="200" />
    <el-table-column prop="categoryDesc" label="简介" min-width="400" />
    <el-table-column prop="blogCount" label="博客数" width="100" />
    <el-table-column label="操作" width="260">
      <template #default="scope">
        <el-button type="primary" plain @click="editCategory(scope.row)">
          <Edit style="width: 1em; height: 1em" />
        </el-button>
        <el-divider direction="vertical" />
        <el-button
          type="danger"
          plain
          @click="deleteCategory(scope.row.categoryId)"
        >
          <Delete style="width: 1em; height: 1em" />
        </el-button>
        <el-divider direction="vertical" />
        <el-button
          type="success"
          plain
          @click="changeSort(scope, 'up')"
          :disabled="scope.$index === 0 ? true : false"
        >
          <Top style="width: 1em; height: 1em" />
        </el-button>
        <el-divider direction="vertical" />
        <el-button
          type="success"
          plain
          @click="changeSort(scope, 'down')"
          :disabled="scope.$index === tableData.list.length - 1 ? true : false"
        >
          <Bottom style="width: 1em; height: 1em" />
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增分类对话框 -->
  <el-dialog
    v-model="addCategoryVisible"
    title="新增分类"
    @closed="closedAddCategoryVisible(addFormRef)"
    draggable
    width="30%"
  >
    <el-form
      :model="addForm"
      label-position="top"
      :rules="addFormRules"
      ref="addFormRef"
    >
      <el-form-item label="名称" prop="categoryName">
        <el-input v-model="addForm.categoryName" />
      </el-form-item>
      <el-form-item label="简介" prop="categoryDesc">
        <el-input
          type="textarea"
          rows="3"
          :autosize="{ minRows: 2, maxRows: 4 }"
          v-model="addForm.categoryDesc"
        />
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <CoverUpload v-model="addForm.cover"></CoverUpload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addCategoryVisible = false">取消</el-button>
        <el-button type="primary" @click="addCategorySubmit(addFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改分类对话框 -->
  <el-dialog
    v-model="editCategoryVisible"
    title="修改分类"
    @closed="closedEditCategoryVisible(editFormRef)"
    draggable
    width="30%"
  >
    <el-form
      :model="editForm"
      label-position="top"
      :rules="editFormRules"
      ref="editFormRef"
    >
      <el-form-item label="名称" prop="categoryName">
        <el-input v-model="editForm.categoryName" />
      </el-form-item>
      <el-form-item label="简介" prop="categoryDesc">
        <el-input
          type="textarea"
          rows="3"
          :autosize="{ minRows: 2, maxRows: 4 }"
          v-model="editForm.categoryDesc"
        />
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <CoverUpload v-model="editForm.cover"></CoverUpload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editCategoryVisible = false">取消</el-button>
        <el-button type="primary" @click="editCategorySubmit(editFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onBeforeMount } from "vue";
const { proxy } = getCurrentInstance();

// 部署前执行
onBeforeMount(() => {
  getBlogCategoryList();
});

// 博客分类
let tableData = reactive({});

// 获取博客分类
const getBlogCategoryList = async () => {
  let { data: result } = await proxy.Request({
    url: "/category/loadAllCategory4Blog",
  });
  tableData.list = result;
};

// 新增分类相关
// 控制新增分类对话框显示隐藏
let addCategoryVisible = ref(false);
// 新增分类表单
const addForm = reactive({
  categoryName: "",
  categoryDesc: "",
  cover: "",
});
// 新增分类规则
const addFormRules = {
  categoryName: [{ required: true, message: "请输入分类名称" }],
};
// 关闭新增分类表单
const addFormRef = ref(null);
const closedAddCategoryVisible = (addFormRef) => {
  addFormRef.resetFields();
};
// 提交新增分类表单
const addCategorySubmit = (addFormRef) => {
  addFormRef.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, addForm);
    let result = await proxy.Request({
      url: "/category/saveCategory4Blog",
      params,
    });
    if (!result) {
      proxy.$message.error("新增失败");
      return;
    }
    addCategoryVisible.value = false;
    proxy.$message.success("新增成功");
    getBlogCategoryList();
  });
};

// 修改分类相关
// 控制修改分类对话框显示隐藏
let editCategoryVisible = ref(false);
// 修改分类表单
const editForm = reactive({
  categoryName: "",
  categoryDesc: "",
  cover: "",
});
// 修改分类规则
const editFormRules = {
  categoryName: [{ required: true, message: "请输入分类名称" }],
};
// 打开修改分类表单
const editCategory = (category) => {
  Object.assign(editForm, category);
  editCategoryVisible.value = true;
};
// 关闭修改分类表单
const editFormRef = ref(null);
const closedEditCategoryVisible = (editFormRef) => {
  editFormRef.resetFields();
};
// 提交修改分类表单
const editCategorySubmit = (editFormRef) => {
  editFormRef.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, editForm);
    let result = await proxy.Request({
      url: "/category/saveCategory4Blog",
      params,
    });
    if (!result) {
      proxy.$message.error("修改失败");
      return;
    }
    editCategoryVisible.value = false;
    proxy.$message.success("修改成功");
    getBlogCategoryList();
  });
};

// 删除分类
const deleteCategory = (categoryId) => {
  proxy.$messageBox
    .confirm("确认删除该分类吗？可在回收站彻底删除或恢复！", "删除分类", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      let result = await proxy.Request({
        url: "category/delCategory4Blog",
        params: { categoryId },
      });
      if (!result) {
        proxy.$message.error("删除失败");
        return;
      }
      proxy.$message.success("删除成功");
      getBlogCategoryList();
    })
    .catch(() => {
      proxy.$message.info("取消删除");
    });
};

// 修改排序
const changeSort = async (scope, type) => {
  let categoryList = tableData.list;
  if (
    (type === "up" && scope.$index === 0) ||
    (type === "down" && scope.$index === categoryList.length - 1)
  ) {
    return;
  }
  let temp = categoryList[scope.$index];
  let targetIndex = type === "up" ? scope.$index - 1 : scope.$index + 1;
  categoryList.splice(scope.$index, 1);
  categoryList.splice(targetIndex, 0, temp);
  let result = await proxy.Request({
    url: "category/changeCategorySort4Blog",
    dataType: "json",
    params: categoryList,
  });
  if (!result) {
    proxy.$message.error("排序失败");
    return;
  }
  proxy.$message.success("排序成功");
  getBlogCategoryList();
};
</script>

<style lang="scss" scoped>
.addCategoryButton {
  margin-bottom: 20px;
}
</style>